<template>
  <div>
    <!-- 顶部导航栏 -->
    <el-affix :offset="0">
      <!-- 布局容器 -->
      <ElRow id="main">
        <!-- 左侧块 -->
        <ElCol
          :span="4"
          class="w-h-full"
        >
          <!--插槽布局 -->
          <slot name="left">
            <div class="col-box flex justify-center items-center gap-1">
              <!-- Label 图标 -->
              <div class="w-fit h-fit">
                <OhVueIcon
                  :scale="0.92"
                  :name="icon"
                ></OhVueIcon>
              </div>
              <!-- Label 标题 -->
              <div class="w-fit h-fit font-bold ml-2">{{ title }}</div>
            </div>
          </slot>
        </ElCol>
        <!-- 中间块 -->
        <ElCol
          :span="16"
          class="col-box"
        >
          <div
            style="width: 100%; height: 100%"
            class="flex items-center justify-center"
          >
            <slot name="center"> </slot>
          </div>
        </ElCol>
        <!-- 右侧块 -->
        <ElCol
          :span="4"
          class="w-h-full"
        >
          <!-- 插槽布局 -->
          <slot name="right">
            <!-- 默认是三个工具栏 -->
            <div class="col-box flex justify-end items-center gap-2 pr-4">
              <!-- 主页 -->
              <div class="opacity-30 hover:opacity-100 hover:cursor-pointer">
                <NuxtLink to="/">
                  <OhVueIcon name="si-homeassistantcommunitystore"></OhVueIcon>
                </NuxtLink>
              </div>
              <!-- 设置 -->
              <div class="opacity-30 hover:opacity-100 hover:cursor-pointer">
                <OhVueIcon
                  name="md-settingsapplications-round"
                  @click="() => navigateTo('/user/')"
                ></OhVueIcon>
              </div>
              <!-- 日夜 -->
              <div class="hover:cursor-pointer">
                <UniColorToggle style="transform: scale(0.75)"></UniColorToggle>
              </div>
            </div>
          </slot>
        </ElCol>
      </ElRow>
    </el-affix>

    <slot />
  </div>
</template>

<script lang="ts" setup>
import { OhVueIcon } from "oh-vue-icons";
defineProps(["title", "icon"]);
const isDark = useDark();
const colorMode = useColorMode();
const onClickSwtichColorMode = () => {
  // isDark.value = !isDark.value;
  // colorMode.preference = isDark.value ? "dark" : "light";
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
#main {
  height: clamp(30px, 5vmax, 40px);
  box-shadow: 0px 0.1px 2px 0.05px var(--color);
  background: linear-gradient(
    to bottom,
    var(--bg-secondly),
    var(--bg-secondly-10)
  );
  backdrop-filter: blur(4px);
}
.col-box {
  width: 100%;
  height: clamp(30px, 5vmax, 40px);
}
</style>
